<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<CustomNavBar title="惠商城" @search-click="handleSearchClick" />
		<!-- 	<view class="input_area">
      	<button class="search_btn"></button>
      		<input type="text" placeholder="鞋子"/>
      		<button class="msg_btn"></button>
      </view> -->
	</view>

	<scroll-view scroll-x="true" class="scroll-content" :scroll-into-view="scrollIntoIndex">
		<!-- 		<view :id="'top'+index" class="scroll-item" v-for="(item,index) in homeTabLayout" :key="index"
			@tap="changetap(index)"> -->
		<!-- <view :id="'top'+index" class="scroll-item" 
			@tap="changetap(index)"> -->
		<!-- <text :class='topBarindex==index? "ft_act_color":"ft_color"'>推荐</text> -->
		<view class="scroll-item">
			<text class="ft_act_color">推荐</text>
		</view>
	</scroll-view>

	<!-- <swiper @change='onchangeTab' :current="topBarindex" :style="'height:'+clentHeight+'px;'"> -->
	<swiper @change='onchangeTab' :current="topBarindex" :style="'height:'+clentHeight+'px;'">
		<!-- <swiper-item v-for="(item,index) in homeTabLayout" v-if="homeTabLayout.length > 0" :key="index"> -->
		<swiper-item v-if="homeTabLayout.length > 0">
			<view class="recommend_data">
				<!-- 		<indexSwiper></indexSwiper>
				<RecommendVue></RecommendVue>
				<cardVue cardTitle="猜你喜欢"></cardVue>
				<CommodityListVue></CommodityListVue> -->

				<!-- <view class="sport">
					<BannerVue></BannerVue>
					<PalaceVue></PalaceVue>
					<cardVue cardTitle="热销爆品"></cardVue>
					<HotVue></HotVue>
					<ShopVue></ShopVue>
					<cardVue cardTitle="为你推荐"></cardVue>
					<CommodityListVue></CommodityListVue>
				</view> -->
				<!-- <CommodityListVue  v-if="homeTabLayout.length > 0" :getdata="item.page_id"></CommodityListVue> -->
				<view class="Commodity_List">
					<!-- 商品列表组件 -->
					<!-- 引入单个商品组件 -->
					<!-- <indexSwiper :Swpier_list="swiper"></indexSwiper> !-->
					<indexSwiper></indexSwiper>
					<PalaceVue :palacelist="com_type"></PalaceVue>
					<cardVue cardTitle="为你推荐"></cardVue>
					<commodityVue :dataList="commodityList"></commodityVue>
				</view>
			</view>
		</swiper-item>
	</swiper>

	<button v-if="showScrollButton" @click="scrollToTop" class="scroll-to-top"></button>
	<!-- 推荐部分 -->
	<!-- 	<view class="index">
      <indexSwiper></indexSwiper>
      <RecommendVue></RecommendVue>
      <cardVue cardTitle="猜你喜欢"></cardVue>
      <CommodityListVue></CommodityListVue>·
  </view> -->

	<!-- 其他部分 -->
	<!-- 	<view class="sport">
    <BannerVue></BannerVue>
    <PalaceVue></PalaceVue>
    <cardVue cardTitle="热销爆品"></cardVue>
    <HotVue></HotVue>
    <ShopVue></ShopVue>
    <cardVue cardTitle="为你推荐"></cardVue>
    <CommodityListVue></CommodityListVue>
  </view> -->


	<!-- 滚动按钮 -->



</template>

<script>
	import indexSwiper from '@/components/index/indexSwiper.vue'
	import RecommendVue from '@/components/index/Recommend.vue'
	import cardVue from '@/components/common/card.vue'
	import CommodityListVue from '@/components/common/CommodityList.vue'
	import commodityVue from '../../components/common/commodity.vue'
	import CustomNavBar from '@/components/common/CustomNavBar.vue'
	import BannerVue from '@/components/index/Banner.vue'
	import PalaceVue from '@/components/index/Palace.vue'
	import HotVue from '@/components/index/Hot.vue'
	import ShopVue from '@/components/index/Shop.vue'
	import {
		getHomeTab,
		getHomeComd,
		getComList,
		getList_info,
		getCom_type
	} from '@/api/request.js'

	export default {
		data() {
			return {
				// 回到顶部
				showScrollButton: false,
				
				title: 'Hello',
				// 选中的索引
				topBarindex: 0,
				// 跟随索引id
				scrollIntoIndex: "top0",
				// 内容块高度值
				clentHeight: 1000,
				// 顶部栏
				homeTabLayout: [],
				// 获取所有的数据page_id
				getdata: [],
				comlist: [],
				comitem: [],
				data2: [],
				data3: [],

				// 轮播图
				swiper: [],
				// 商品分类
				com_type: [],

				topBar: [{
						name: '推荐'
					},
					{
						name: '运动户外'
					},
					{
						name: '服饰内衣'
					},
					{
						name: '鞋靴箱包'
					},
					{
						name: '美妆个护'
					},
					{
						name: '家庭数码'
					},
					{
						name: '食品母婴'
					}
				],

				commodityList: [{
						id: "1",
						imgUrl: "../../static/images/鞋子1.jpg",
						name: "鞋子爆款2024，鞋子男,回力鞋子男款2024新款秋季厚底板鞋小众原创高级感潮牌百搭休闲鞋",
						p_price: "￥299",
						o_prict: "￥599",
						discount: "4.9折"
					},
					{
						id: "2",
						imgUrl: "../../static/images/鞋子2.jpg",
						name: "国货品牌联名男鞋2024秋款新款男士休闲百搭秋冬小白板鞋运动潮鞋",
						p_price: "￥113",
						o_prict: "￥128",
						discount: "8.8折"
					},
					{
						id: "3",
						imgUrl: "https://gw.alicdn.com/imgextra/i3/1773748534/O1CN01AlTq5B2Cud0zUvhLU_!!1773748534.jpg",
						name: "PtonUmi 奶盐咸桃少女感爱心提花针织开衫女秋冬短款宽松毛衣外套",
						p_price: "￥168",
						o_prict: "￥178",
						discount: "9.4折"
					},
					{
						id: "5",
						imgUrl: "https://gw.alicdn.com/imgextra/i2/284411598/O1CN014pWV4X1NfvuxjdG8e_!!284411598.jpg",
						name: "QDQD 甜美马卡龙90白鸭绒小个子短款粉色连帽面包羽绒服女冬季",
						p_price: "￥499",
						o_prict: "￥559",
						discount: "8.3折"
					}
				],
			}
		},
		onLoad() {
			this._index();
			// this.getlist(0)
			this.getLIst();
			this.getLIst2();
			
			
		},
		onReady() {
			// let view = uni.createSelectorQuery().select(".recommend-data");
			// view.boundingClientRect(data => {
			// 	this.clentHeight = data.height;
			// }).exec();
		},
		mounted() {
				// 添加滚动事件监听器
				window.addEventListener('scroll', this.handleScroll);
			},
		beforeDestroy() {
				// 移除滚动事件监听器
				window.removeEventListener('scroll', this.handleScroll);
			},
		components: {
			indexSwiper,
			RecommendVue,
			cardVue,
			CommodityListVue,
			CustomNavBar,
			BannerVue,
			PalaceVue,
			HotVue,
			ShopVue,
			commodityVue
		},
		methods: {
			// 获取首页tab栏数据
			async _index() {
				try {
					const data = await getHomeTab();
					this.homeTabLayout = data.data.recom_list;
					// 获取数据
					console.log("data=>", data)
					console.log("homeTabLayout=>", this.homeTabLayout);

					// 赋值
					this.commodityList = []

					this.commodityList = this.homeTabLayout;


					// 获取数组
					// this.getdata = data.data.tabs.map(item => item.page_id);
					// console.log("getdata=>", this.getdata);
					// 获取高度
					this.getCleanHeight();
				} catch (error) {
					console.error('获取首页数据出错:', error);
				}
			},
			changetap(index) {
				if (this.topBarindex === index) {
					return;
				} else {
					this.topBarindex = index;
					this.scrollIntoIndex = "top" + index
				}
			},
			// 改变tab
			onchangeTab(e) {
				this.changetap(e.detail.current);
				console.log("getdata", this.getdata);
				console.log("this.getdata[e.detail.current]", this.getdata[e.detail.current]);
			},
			// 跳转搜索
			handleSearchClick() {
				// 跳转到搜索页面
				uni.redirectTo({
					url: '/pages/search/search'
				});
			},
			// 获取高度
			getCleanHeight() {
				this.$nextTick(() => {
					uni.getSystemInfo({
						success: (res) => {
							const windowHeight = res.windowHeight;
							const statusBarHeight = res.statusBarHeight;
							// 顶部
							const navigationBarHeight = 44;
							// 底部
							const tabBarHeight = 50;

							const availableHeight = windowHeight - statusBarHeight -
								navigationBarHeight - tabBarHeight;

							let view = uni.createSelectorQuery().select('.recommend_data');
							view.boundingClientRect(data => {
								if (data) {
									// console.log("data", data);	
									this.clentHeight = data.height || availableHeight;
								} else {
									this.clentHeight = availableHeight;;
									console.error("未找到 .recommend_data 元素,请检查代码");
								}
							}).exec();
						},
						fail: (err) => {
							console.error('获取系统信息失败:', err);
						}
					});
				});
			},

			// 获取轮播？
			async getLIst() {
				try {
					this.data2 = await getList_info("page_id=14298");
					console.log("Palace.轮播数据=>", this.data2.data.sections[1].body.items)
					this.swiper = this.data2.data.sections[1].body.items;
				} catch (error) {
					console.log("Hot.error=>", error);
				}
			},
			// 推荐商品分类
			async getLIst2() {
				try {
					this.data3 = await getCom_type("cat_id=1836");
					console.log("Palace.推荐商品分类=>", this.data3.data.top_tab)
					this.com_type = this.data3.data.top_tab;
				} catch (error) {
					console.log("Hot.error=>", error);
				}
			},

			handleScroll() {
				const windowHeight = window.innerHeight;
				const scrollPosition = window.scrollY;
				// 如果滚动距离大于一个页面的高度，显示按钮
				this.showScrollButton = scrollPosition > windowHeight;
			},
			scrollToTop() {
				window.scrollTo({
					top: 0,
					behavior: 'smooth'
				});
			}
		},
		// 列表数据
		// async getlist(getdata) {
		// 	let page_id = getdata;
		// 	try {
		// 		const mydata = await getHomeTab({
		// 			"page_type": "activity",
		// 			"page_id": page_id
		// 		});
		// 		// this.commodityList = mydata.result; // 更新 commodityList
		// 		// console.log("getdata", getdata); 
		// 		console.log("mydata", mydata.data.data);
		// 		// 赋值

		// 	} catch (error) {
		// 		console.error('获取商品列表数据出错:', error);
		// 	}
		// },

	}
</script>

<style scoped>
	.scroll-content {
		width: 100%;
		height: 80rpx;
		white-space: nowrap;
	}

	.scroll-item {
		display: inline-block;
		padding: 10rpx 40rpx;
		font-size: 36rpx;
	}

	.ft_act_color {
		padding: 10rpx 0;
		border-bottom: 8rpx solid #897ef8;
	}

	.container {
		display: flex;
		flex-direction: column;
		text-align: center;
	}

	.custom-nav {
		display: flex;
		flex-grow: 1;
		align-items: center;
		justify-content: space-between;
		padding: 0 20px;
		height: 160rpx;
		background-color: #ff5218;
		color: white;
	}

	.search-container {
		width: 44px;
		height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.search-icon {
		width: 24px;
		height: 24px;
		margin-top: 70rpx;
		background-image: url(../../static/icon_search_white.png);
	}

	.custom-title {
		font-size: 18px;
		text-align: center;
		position: relative;
		width: 200rpx;
		display: inline-flex;
		padding-left: 10rpx;
		margin-top: 110rpx;
		font-weight: bold;
	}

	.content {
		flex: 1;
		padding: 20px;
		background-color: #f8f8f8;
	}
	.scroll-to-top{
		position: fixed;
		right: 20rpx;
		width: 120rpx;
		height: 140rpx;
		top:70%;
		background-image: url(/static/回到顶部.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-color: #424242;
	}
</style>